<script setup defer async lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { points } from '@/api/user'
import { useI18n } from 'vue-i18n'
import { formatDate,convertNumbers } from '@/utils/utils'
import { useSwipeHandlers } from '@/utils/useSwipeHandlers'
const { t } = useI18n()
const country=ref(1);
	const exchangeRate=ref(1);
	const symbol = ref('$')

const baseData = reactive({
  condition: [0, 0],
  loading: false,
  page: 1,
  total: 0,
  typesList: [
    { label: 'All types', value: 0 },
    { label: 'Bind WS Account', value: 1 },
    { label: 'Idle Task', value: 2 },
    { label: 'QR Code Task', value: 3 },
    { label: 'Spin the Wheel Activity', value: 4 },
    { label: 'Invite New Task', value: 5 },
    { label: 'Manual Activity Reward', value: 6 },
    { label: 'Group Task', value: 7 },
    { label: 'Referral Activity', value: 8 },
    { label: 'Online Earnings (Fixed Idle Activity)', value: 11 },
    { label: 'Idle Rebate', value: 12 },
    { label: 'Treasure Hunt Activity Expense', value: 13 },
    { label: 'Treasure Hunt Activity Earnings', value: 14 },
    { label: 'New User Task Earnings', value: 15 },
    { label: 'Book Mark', value: 16 },
  ],
  timeList: ['All time', 'Today', 'Yesterday', 'In the past seven days'],
  dataList: [],
  aircraftUrl: uni.getStorageSync('aircraftUrl'),
  isContinueGetList: true,
})
const getTi = (change_type_id: any) => {
  return baseData.typesList.filter((item: any) => item.value == change_type_id)[0].label
}
const uDropdownRef = ref(null)
const changTypes = (index: any) => {
  uDropdownRef.value?.close()
  baseData.condition[0] = index
  baseData.dataList = []
  baseData.page = 1
  baseData.isContinueGetList = true
  getList()
}
const changTime = (index: any) => {
  uDropdownRef.value?.close()
  baseData.condition[1] = index
  baseData.dataList = []
  baseData.page = 1
  baseData.isContinueGetList = true
  getList()
}
const leftClick = () => {
  window.top?.postMessage('/pages/user/index', window.location.origin)
  uni.navigateTo({
    url: '/pages/user/index',
  })
}
const handleScroll = () => {
  getList()
}
const getList = async () => {
  if (!baseData.isContinueGetList) return
  baseData.loading = true
  uni.showLoading({
    title: t('Loading'),
    icon: 'none',
  })
  let params: any = {
    page: baseData.page,
    change_type: baseData.condition[0],
    time_types: baseData.condition[1],
    pageSize: 20,
  }
  // if (baseData.total < baseData.page * params.pageSize) return;
  const res = await points(params)
  if (res.code == 0) {
    uni.showToast({
      title: res.msg,
      icon: 'none',
    })
    // console.log(res)
    baseData.total = res.data.total
    if (res.data.list.length > 0) {
      baseData.dataList = baseData.dataList.concat(res.data.list)
      baseData.page++
    }
    if (baseData.total <= (baseData.page - 1) * params.pageSize) {
      baseData.isContinueGetList = false
    }
    baseData.loading = false
    uni.hideLoading()
  } else {
    baseData.loading = false
    uni.hideLoading()
    uni.showToast({
      title: res.msg,
      icon: 'none',
    })
  }
}
// 
const handleSwipeRight = () => {
  const pages = getCurrentPages()
  if (pages.length <= 1) {
    history.back()
  } else {
    uni.navigateBack()
  }
}
useSwipeHandlers(handleSwipeRight)
onMounted(() => {
  // 
  uni.setNavigationBarTitle({
    title: 'Ttask!' + t('Earn money so easy') + '!', // 
  })
  symbol.value = uni.getStorageSync('symbol') || '₹'; 
  		country.value=uni.getStorageSync('country') || 1;
  		exchangeRate.value=uni.getStorageSync('exchangeRate') || 1;
  getList()
})
</script>

<template>
  <view class="main">
	  <!--  -->
	  <view class="bg-decoration">
	    <view class="circle circle-1"></view>
	    <view class="circle circle-2"></view>
	    <view class="circle circle-3"></view>
	    <view class="floating-shape shape-1">📱</view>
	    <view class="floating-shape shape-2">💰</view>
	    <view class="floating-shape shape-3">📋</view>
	  </view>
    <up-navbar :title="t('Detail of the proceeds')" @leftClick="leftClick" :autoBack="false">
      <template #left>
        <view class="nav-back-btn">
          <image class="back-icon" src="../../../static/img/left.png"></image>
        </view>
      </template>
    </up-navbar>
    <view class="conditions">
      <up-dropdown ref="uDropdownRef" active-color="#667eea" title-size="0.8rem" menu-icon="arrow-down-fill">
        <!-- <up-dropdown-item :title="t(baseData.typesList[baseData.condition[0]].label)"> -->
        <up-dropdown-item :title="t(getTi(baseData.condition[0]))">
          <view class="slot-content">
            <view class="up-text-center up-content-color up-m-t-20 up-m-b-20" style="background: #fff; padding: 0.4rem">
              <view
                v-for="(item, index) in baseData.typesList"
                :class="baseData.condition[0] == item.value ? 'citems' : 'items'"
                :key="item.value"
                @click="changTypes(item.value)"
              >
                {{ t(item.label) }}
              </view>
            </view>
          </view>
        </up-dropdown-item>
        <up-dropdown-item :title="t(baseData.timeList[baseData.condition[1]])">
          <view class="slot-content">
            <view class="up-text-center up-content-color up-m-t-20 up-m-b-20" style="background: #fff; padding: 0.4rem">
              <view
                v-for="(item, index) in baseData.timeList"
                :class="baseData.condition[1] == index ? 'citems' : 'items'"
                :key="index"
                @click="changTime(index)"
              >
                {{ t(item) }}
              </view>
            </view>
          </view>
        </up-dropdown-item>
      </up-dropdown>
    </view>
    <view class="lists">
      <up-list @scrolltolower="handleScroll" style="height: 100%">
        <up-list-item v-show="baseData.dataList.length != 0" v-for="(item, index) in baseData.dataList" :key="index">

		  <view class="revenue-item">
		    <view class="revenue-icon">📱</view>
		    <view class="content">
		      <view
		        style="
		          font-weight: bold;
		          margin-top: 0.2rem;
		          font-size: 0.9rem;
		          color: #606266;
		          width: 60%;
		          overflow: hidden;
		          display: -webkit-box;
		          -webkit-line-clamp: 2;
		          -webkit-box-orient: vertical;
		          text-overflow: ellipsis;
		        "
		      >
		        <span style="color: #000">{{ t(getTi(item.change_type_id)) }}</span>
		        <!-- <span style="color: #000;">{{t('remark')}}</span>:{{item.remark?item.remark:"-"}} -->
		      </view>
		      <view style="font-size: 0.6rem; color: #606266">{{
		        item.UpdatedAt.split('.')[0].replace('T', ' ')
		      }}</view>
		      <!-- <view style="font-size: 0.6rem;color:#606266;">{{formatDate(item.change_time*1000)}}</view> -->
		    </view>
		    <view class="money">{{symbol}} {{convertNumbers(item.change_points,exchangeRate)  }}</view>
		  </view>
        </up-list-item>
        
        <view
          class="status-text"
          v-show="!baseData.loading && baseData.dataList.length != 0"
        >
          {{ t('Reached the End') }}
        </view>
       <!-- <view class="status-text" v-show="baseData.loading">
          {{ t('Loading') }}...
        </view> -->
       <!--  -->
       <view class="empty-state" v-show="baseData.dataList.length === 0 && !baseData.loading">
         <view class="empty-icon">📊</view>
         <text class="empty-text">{{ t('No Data') }}</text>
       </view>
      </up-list>
    </view>
    <a :href="baseData.aircraftUrl" target="_blank"> <img class="telegram-fixed-icon" src="@/static/teltgram.png" /></a>
  </view>
</template>

<style lang="scss" scoped>
.main {
  display: flex;
  flex-flow: column;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

// 
.filter-section {
  margin-top: 70rpx;
  border-radius: 25rpx;
  
  .filter-container {
    padding: 20rpx;

    //  up-dropdown 
    ::v-deep .u-dropdown {
      .u-dropdown__content {
        margin-top: 10rpx;
      }

      .u-dropdown__menu {
        background: white;
        border-radius: 15rpx;
        padding: 10rpx !important;
margin-top: 10px;
        .u-dropdown__menu__item {
          background: white !important;
          color: #333;
          font-weight: 600;
          padding: 15rpx 20rpx;
          transition: all 0.3s ease;
          margin-bottom: 5rpx;
          border-radius: 10rpx;

          &:last-child {
            border-bottom: none;
          }

          &:hover {
            background: rgba(102, 126, 234, 0.1) !important;
          }
        }
      }

      // 
      .u-dropdown__menu__item__icon {
        color: #667eea !important;
      }
    }

    .dropdown-content {
      background: white;
      max-height: 50vh;
      padding: 20rpx;

      .filter-options {
        padding: 20rpx;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15rpx;

        .option-item {
          text-align: center;
          padding: 20rpx 15rpx;
          background: rgba(102, 126, 234, 0.1);
          border-radius: 15rpx;
          font-size: 24rpx;
          color: #333;
          transition: all 0.3s ease;
          cursor: pointer;
          border: 2rpx solid transparent;
          word-wrap: break-word;
          line-height: 1.3;

          &.active {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            transform: translateY(-2rpx);
            box-shadow: 0 8rpx 20rpx rgba(102, 126, 234, 0.3);
            border-color: #667eea;
          }

          &:active {
            transform: scale(0.95);
          }

          &:not(.active):hover {
            background: rgba(102, 126, 234, 0.2);
            transform: translateY(-1rpx);
          }
        }
      }
    }
  }
}

.lists {
  margin-top: 1px;
  flex: 1;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  width: 100%;
  height: 100%;
  overflow: hidden;
  .empty {
    width: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    margin-top: 2rem;
    color: #c8c9cc;

    image {
      width: 5rem;
      height: 5rem;
      margin-bottom: 1rem;
    }
  }

  .status-text {
    width: 100%;
    text-align: center;
    color: #999;
    margin: 30rpx 0;
    font-size: 26rpx;
  }

  // 
  .revenue-item {
    display: flex;
    align-items: flex-start;
    background: white;
    padding: 30rpx 25rpx;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.3s ease;

    &:active {
      background: #f8f9fa;
      transform: scale(0.99);
    }

    // 
    .revenue-icon {
      width: 70rpx;
      height: 70rpx;
      border-radius: 12rpx;
      background: linear-gradient(135deg, #667eea, #764ba2);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 25rpx;
      margin-top: 5rpx;
      flex-shrink: 0;

      .icon-symbol {
        font-size: 30rpx;
        color: white;
      }
    }

    // 
    .revenue-content {
      flex: 1;
      display: flex;
      flex-direction: column;

      .revenue-amount {
        font-size: 36rpx;
        font-weight: 700;
        color: #333;
        margin-bottom: 12rpx;

        .currency {
          font-size: 36rpx;
          margin-right: 2rpx;
        }
      }

      .revenue-description {
        display: flex;
        flex-direction: column;
        gap: 8rpx;

        .remark-info {
          font-size: 28rpx;
          color: #333;
          line-height: 1.4;

          .remark-label {
            font-weight: 600;
            color: #333;
          }

          .status-text {
            color: #333;
            font-weight: 500;
          }

          .status-detail {
            color: #666;
            font-size: 28rpx;
          }
        }

        .time-info {
          font-size: 28rpx;
          color: #999;
          margin-top: 5rpx;
        }
      }
    }

    // 
    .revenue-amount-display {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      text-align: right;
      min-width: 120rpx;
      flex-shrink: 0;

      .main-amount {
        font-size: 38rpx;
        font-weight: 700;
        color: #333;
        margin-bottom: 8rpx;
      }

      .sub-amount {
        font-size: 28rpx;
        color: #999;
        font-weight: 500;
      }
    }
  }

  // 
  ::v-deep .up-list-item {
    margin-bottom: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;

    .u-list-item {
      padding: 0;
      background: transparent;

      .u-list-item__content {
        padding: 0;
        
        .u-list-item__content__main {
          padding: 0;
          
          .u-list-item__content__main__desc {
            padding: 0;
            margin: 0;
          }
        }
      }
    }
  }
}
.empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 100rpx 0;

      .empty-icon {
        font-size: 120rpx;
        margin-bottom: 30rpx;
        opacity: 0.3;
      }

      .empty-text {
        font-size: 28rpx;
        color: #999;
      }
    }
.conditions {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: center;
  background: #fff;
  width: 100%;
  margin-top: 45px;

  .up-text-center {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    justify-content: space-between;
  }

  .items {
    width: 10.8rem;
    text-align: center;
    margin: 0.2rem;
    background: #f7f7f7;
    padding: 0.4rem 0;
    border-radius: 1.2rem;
    font-size: 0.8rem;
    color: #000;
  }

  .citems {
    width: 10.8rem;
    text-align: center;
    margin: 0.2rem;
     background: linear-gradient(135deg, #667eea, #764ba2);
    padding: 0.4rem 0;
    color: #fff;
    border-radius: 1.2rem;
    font-size: 0.8rem;
  }
}

.u-dropdown {
  .u-dropdown__content {
    height: 94vh !important;
  }

  .u-m-t-20,
  .up-m-t-20 {
    margin-top: 0px !important;
  }
}
// 
.bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  

  .circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    animation: float 6s ease-in-out infinite;

    &.circle-1 {
      width: 200rpx;
      height: 200rpx;
      top: 10%;
      left: 10%;
      animation-delay: 0s;
    }

    &.circle-2 {
      width: 150rpx;
      height: 150rpx;
      top: 30%;
      right: 20%;
      animation-delay: 2s;
    }

    &.circle-3 {
      width: 100rpx;
      height: 100rpx;
      top: 75%;
      left: 20%;
      animation-delay: 4s;
    }
  }

  .floating-shape {
    position: absolute;
    font-size: 60rpx;
    opacity: 0.3;
    animation: bounce 4s ease-in-out infinite;

    &.shape-1 {
      top: 25%;
      right: 15%;
      animation-delay: 1s;
    }

    &.shape-2 {
      top: 60%;
      left: 15%;
      animation-delay: 3s;
    }

    &.shape-3 {
      top: 80%;
      right: 25%;
      animation-delay: 5s;
    }
  }
}

</style>